<template>
	<view>
		<!-- 课程展示区域 -->
		<view class="courses" :style="{backgroundImage: backgroundImg}">

			<swiper v-if="coursesList.length" @animationfinish="changeCourseWeek" :current="showingWeek"
				style="width: 651rpx;" v-bind:style="{ height: 12 * courseRenderConfig.each_height + 'rpx' }">
				<!-- 一共24周的滑动展示 -->
				<swiper-item v-for="(courses,week_idx) in coursesList" :key="week_idx">
					<!-- 当前周课程的展示 -->
					<view class="course-item" v-if="courses.length" v-for="(course, index) in courses"
						:animation="course.animation" :key='index' v-bind:style="{
						height: course.height + 'rpx',
						backgroundColor: course.week == week && course.day == day ? course.color.fill_color:course.color.background_color,
						color: course.week == week && course.day == day ?'#fff':course.color.font_color,
						left: course.left + 'rpx',
						top: course.top + 'rpx',
						width: course.width + 'rpx',
						'z-index': course.zindex,
						'box-shadow': course.moved ? '4rpx 4rpx 20rpx 1px rgba(0, 0, 0, 0.17)' : 'none',
						border: course.moved ? 'solid 1px' : 'none'
					}">

						<view style="font-size:24rpx;" class="topic_cont_text">{{ course.name }}</view>
						<view style="font-size:22rpx;" class="topic_cont_text">{{ course.location }}</view>
					</view>
					<view v-if="courses.length==0" class="non-course"
						:style="{ height: 'calc(100vh - ' + naviBarHeight + 'px' + ' - ' + '176rpx)' }">
						<view style="font-size: 56rpx;">本周暂无课程</view>
						<view style="font-size: 40rpx;">左右滑动以查看其它周次</view>
					</view>
					<view v-if="showMask" @click="closeMask" class="mask-style"> </view>


				</swiper-item>
			</swiper>
			<view v-else class="non-course"
				:style="{ height: 'calc(100vh - ' + naviBarHeight + 'px' + ' - ' + '176rpx)' }">
				暂无课程
			</view>
		</view>
	</view>

</template>

<script>
	class CourseRenderItem {
		constructor(course) {
			this.code = course.code
			this.name = course.name
			this.teacher = course.teacher
			this.credits = course.credits
			this.times = course.times
			this.color = course.color
		}
		// 计算课程的位置
		calcRender(time_idx, week_idx, courseRenderConfig) {
			this.moved = false // 是否有未展开前的轻微移动
			this.overlapped = false // 是否被展开
			this.animation = null
			this.zindex = 1
			this.width = courseRenderConfig.block_width
			this.location = this.times[time_idx].location
			this.time_idx = time_idx
			this.week = week_idx
			this.day = this.times[time_idx].day
			this.periods = this.times[time_idx].periods // 表示上课的节数，如[1,2,3]表示这堂课从第一节开始，第三节结束
			this.left = courseRenderConfig.each_width * this.day;
			// 根据开始时间计算top偏移量
			this.top = courseRenderConfig.each_height * this.periods[0];
			// 根据结束时间和开始时间计算高度
			this.height = courseRenderConfig.each_height * (this.periods[this.periods.length - 1] - this.periods[0] +
				1);
			// 为了使得方块之间不接触需要再次偏移
			this.padding = (courseRenderConfig.each_width - courseRenderConfig.block_width) / 2;
			this.left = this.left + this.padding;
			this.top = this.top + this.padding;
			this.height = this.height - 2 * this.padding;
			this.overlapping_animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease'
			});
		}
		randomColor() {
			let num_colors = colors.length
			let choice = Math.floor(Math.random() * num_colors) // [0,num_colors）区间内的整数
			return colors[choice]
		}
		moveLeftTop() {
			if (!this.moved) {
				this.moved = true
				this.left = this.left - this.padding / 2;
				this.top = this.top - this.padding / 2;
			}
		}
		moveRightBottom() {
			if (!this.moved) {
				this.moved = true
				this.left = this.left + this.padding / 2;
				this.top = this.top + this.padding / 2;
			}
		}
		overLappingLeft() {
			this.overlapped = true
			this.zindex = 100
			this.animation = this.overlapping_animation
				.translateX('-42rpx')
				.translateY('2rpx')
				.step()
				.export();
		}
		overLappingRight(i) {
			this.overlapped = true
			this.zindex = 100
			this.animation = this.overlapping_animation
				.translateX((i - 1) * 93 + 42 + 'rpx')
				.translateY('-2rpx')
				.step()
				.export();
		}
		hideOverlapping(i) {
			this.overlapped = false
			this.zindex = i;
			this.animation = this.overlapping_animation
				.translateX('0')
				.translateY('0')
				.step()
				.export();
		}
	}

	// 定义课程表类
	class CourseRenderList {
		constructor(num_weeks, courseRenderConfig) {

			// 长度为24，表示24周中的每周课程，每个元素是零个或多个CourseRenderItem组成的的数组，
			this.coursesList = Array.from({
				length: num_weeks
			}, () => [])

			// 24 * 7 * 12 的三维数组，表示24周，每周中的7天，每天的12节课，每个元素是零个或多个CourseRenderItem组成的的数组
			this.timeSlots = Array.from({
				length: num_weeks
			}, () => Array.from({
				length: 7
			}, () => Array.from({
				length: 12
			}, () => [])));

			// 一些控制渲染的参数
			this.courseRenderConfig = courseRenderConfig
		}

		addCourse(course) {
			try{
				course.times.forEach((time, time_idx) => {
					for (let week of time.weeks) {
						var courseRenderItem = new CourseRenderItem(course)
						courseRenderItem.calcRender(time_idx, week, this.courseRenderConfig)
						this.coursesList[week].push(courseRenderItem)
						for (let period of time.periods) {
							// console.log(this.timeSlots[week][time.day],this.timeSlots[week][time.day][period])
							if (this.timeSlots[week][time.day][period].length != 0) {
								this.timeSlots[week][time.day][period][0].moveLeftTop()
								courseRenderItem.moveRightBottom()
							}
							this.timeSlots[week][time.day][period].push(courseRenderItem);
						}
					}
				})
			}catch(e){
				//TODO handle the exception
				console.log('add course error',e,course)
			}
			
		}

	}
	export default {
		name: 'courses',
		props: {
			showingWeek: Number,
			todayWeek: Number,
			todayDay: Number,
			naviBarHeight: Number,
		},
		data() {
			return {
				showMask: false,
				showingCourseDay: undefined,
				showingCoursePeriod: undefined,
				courseSchedule: undefined,
				courseRenderConfig: { //单位rpx
					each_height: 112,
					each_width: 93,
					block_width: 85,
					margin_left: 92,
					margin_top: 94,
				},
				backgroundImg: 'url()',
			}
		},
		computed: {
			coursesList() {
				this.kechengbiao = getApp().globalData.kechengbiao;
				this.courseSchedule = new CourseRenderList(24, this.courseRenderConfig)
				for (const course of this.kechengbiao) {
					this.courseSchedule.addCourse(course)
				}
				return this.courseSchedule.coursesList
			}

			// add_event = getApp().globalData.add_event;
			// event_list = this.kechengbiao.concat(this.add_event);

			// this.mine_list = this.event_list;
		},

		created() {
			// 获取课程表背景图片
			getApp().globalData.kechengbiao_img = uni.getStorageSync("kechengbiao_img")
			this.backgroundImg = getApp().globalData.kechengbiao_img

			// this.courseSchedule = new CourseRenderList(24, this.courseRenderConfig)
			// const kechengbiao = getApp().globalData.kechengbiao
			// console.log(kechengbiao)
			// console.log("kechengbiao")
			// if (kechengbiao.length) {
			// 	for (const course of kechengbiao) {
			// 		this.courseSchedule.addCourse(course)
			// 	}
			// }

			// this.event_list = this.kechengbiao.concat(this.add_event);

			// this.mine_list = this.event_list;
		},

		methods: {
			changeCourseWeek(e) {
				// this.showingWeek = e.detail.current
				this.$emit("animationfinish", {
					"current": e.detail.current
				})
			},
			// 处理点击课程的事件，当点击的时间方格内只有一个课程，则进入课程的编辑页面，若有两个或以上，则将课程展开、背景虚化
			// 展开重叠区域的课程
			clickOverLapping(week, day, period) {
				var overlapping_list = this.courseSchedule.timeSlots[week][day][period];
				for (var i = 0; i < overlapping_list.length; i++) {
					var courseRenderItem = overlapping_list[i]
					if (i == 0) {
						courseRenderItem.overLappingLeft()
					} else {
						courseRenderItem.overLappingRight(i)
					}
				}
			},
			// 收起展开过的区域的课程
			hideOverlapping(week, day, period) {
				var overlapping_list = this.courseSchedule.timeSlots[week][day][period];
				for (var i = 0; i < overlapping_list.length; i++) {
					var courseRenderItem = overlapping_list[i];
					courseRenderItem.hideOverlapping(i)
				}
			},
			closeMask() {
				var that = this;
				setTimeout(function() {
					that.showMask = false;
				}, 200);
				this.hideOverlapping(this.showingWeek,this.showingCourseDay,this.showingCoursePeriod)
			},
		}
	}
</script>

<style>
	.topic_cont_text {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
		font-family: 'pingfang';
	}

	.mask-style {
		opacity: 0.8;
		position: absolute;
		display: flex;
		z-index: 50;
		height: 100vh;
		width: 100vw;
		box-shadow: none;
		-webkit-backdrop-filter: saturate(180%) blur(64rpx);
		backdrop-filter: saturate(180%) blur(64rpx);
		background: rgba(256, 256, 256, 0.5);
	}

	/* @keyframes stop {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes start {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.show_mask_ani {
		animation: start 0.2s forwards;
	}

	.hide_mask_ani {
		animation: stop 0.2s forwards;
	} */

	.courses {
		position: relative;
		width: 651rpx;
		background-repeat: no-repeat;
		background-size: cover;
		margin-top: 223rpx;
	}

	.course-item {
		z-index: 10;
		position: absolute;
		display: flex;
		flex-direction: column;
		padding: 5rpx;
		border-radius: 10rpx;
		border: solid 1px;
	}

	.non-course {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 56rpx;
		color: #c3c3c3;
	}
</style>